<template>
	<view class="body">
		<input password v-model="oldpwd" class="uni-input common-input" placeholder="输入旧密码" />
		<input password v-model="newpwd" class="uni-input common-input" placeholder="输入新密码" />
		<input password v-model="repwd" class="uni-input common-input" placeholder="输入确认密码" />
		<button 
		class="user-set-btn" 
		type="primary"
		:class="{'user-set-btn-disable' : disable}" 
		:disabled="disable"  
		:loading="loading"
		@tap="submit"
		>完成</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oldpwd: '',
				newpwd: '',
				repwd: '',
				disable: true,
				loading: false
			}
		},
		watch:{
			oldpwd(val){
				this.change()
			},
			newpwd(val){
				this.change()
			},
			repwd(val){
				this.change()
			}
		},
		methods: {
			// 监听输入改变
			change(){
				if(this.oldpwd && this.newpwd && this.repwd){
					this.disable = false;
					return;
				}
				this.disable = true;
			},
			// 验证
			check(){
				if(!this.oldpwd || this.oldpwd.trim() == ''){
					uni.showToast({
						title: '旧密码不能为空',
						icon:'none'
					})
					return false;
				}
				if(!this.newpwd || this.newpwd.trim() === ''){
					uni.showToast({
						title: '新密码不能为空',
						icon:'none'
					})
					return false;
				}
				if(!this.repwd || this.repwd.trim() === ''){
					uni.showToast({
						title: '确认密码不能为空',
						icon:'none'
					})
					return false;
				}
				
				if(this.newpwd !== this.repwd){
					uni.showToast({
						title: '确认密码与新密码不同',
						icon:'none'
					})
					return false;
				}
				
				return true;
			},
			// 提交
			submit(){
				if(!this.check()){
					return;
				}
				this.loading = true;
				this.disable = true;
				setTimeout(() => {
					this.disable = false;
					this.loading = false;
				},2000);
				
			}
		}
	}
</script>

<style>
	@import '../../common/form.css';
	
</style>
